<example name="Checkbox">
  <file type="html">
    <h1>Base Examples</h1>
    <div id="checkbox-base">
      <span id="checkbox"></span>
      <span id="checkbox-selected"></span>
      <span id="checkbox-disabled"></span>
    </div>

    <h1>Examples with outer styles</h1>
    <div id="checkbox-additional">
      <div style="line-height: 60px">
        <span id="checkbox-in-large-line-height-div"></span>
        <span>This text should be aligned on same line with checkbox label</span>
      </div>
      <div style="line-height: 6px;">
        <span id="checkbox-in-small-line-height-div"></span>
        <span>This text should be aligned on same line with checkbox label</span>
      </div>
      <div style="line-height: 48px; font-size: 40px">
        <span id="checkbox-in-large-font-div"></span>
        <span>This text should be aligned on same line with checkbox label</span>
      </div>
      <div style="line-height: 6px; font-size: 4px">
        <span id="checkbox-in-small-font-div"></span>
        <span>This text should be aligned on same line with checkbox label</span>
      </div>
    </div>
  </file>

  <file type="js">
    import React from 'react';
    import {render} from 'react-dom';
    import Checkbox from '@jetbrains/ring-ui/components/checkbox/checkbox';

    render(<Checkbox/>, document.getElementById('checkbox'));

    render(<Checkbox checked/>, document.getElementById('checkbox-selected'));

    render(<Checkbox checked disabled label="This checkbox is disabled"/>, document.getElementById('checkbox-disabled'));

    render(<Checkbox checked label="This checkbox is inside a div with large line-height."/>, document.getElementById('checkbox-in-large-line-height-div'));

    render(<Checkbox checked
      label="This checkbox is inside a div with small line-height."
    />, document.getElementById('checkbox-in-small-line-height-div'));

    render(<Checkbox checked
      label="This checkbox is inside a div with large font-size."
    />, document.getElementById('checkbox-in-large-font-div'));

    render(<Checkbox checked
      label="This checkbox is inside a div with small font-size."
    />, document.getElementById('checkbox-in-small-font-div'));
  </file>
</example>
